<template>
  <div class="home" @click="routerGo('nav')">
    <MediaPlayer :list="mediaList.list" :delay="homeTimerDelay"></MediaPlayer>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router"
import {reactive} from "vue";
import MediaPlayer from '../components/MediaPlayer.vue'

let mediaList: any = reactive({list: []})
const router = useRouter()
import axios from '../utils/http'

let {homeImgId, homeVideoId, homeTimerDelay,httpUrl} = platformConfig
getList()

function getList() {
  let url = '/api/appliedModule/page'
  let dataSize = {
    pageSize: 9999,
    pageNum: 1,
  }
  Promise.all([axios.get(url, {
    params: {
      bizId: homeVideoId,
      ...dataSize
    }
  }), axios.get(url, {
    params: {
      bizId: homeImgId,
      ...dataSize
    }
  })]).then(res => {
    let finallyTemp = []
    for (let item of res) {
      finallyTemp.push(...item.data.data.records)
    }
    let temp = []
    for (let s of finallyTemp) {
      if (s.url.endsWith('.mp4')) {
        s.type = 'mp4'
      } else {
        s.type = 'image'
      }
      s.finallyUrl =httpUrl + 'api' + s.url
      temp.push(s)
    }
    mediaList.list = temp
  })
}
function routerGo(path: string) {
  router.push({
    path: `/${path}`
  })
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-wrap {
  width: 1920px;
  height: 1080px;

  img {
    width: 100%;
    height: 100%;
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;

    &:focus {
      outline: none;
    }
  }
}
</style>
